<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover特效</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
        }
        .menu{
            margin: 0;
            padding: 0;
            margin-top: 350px;
        }
        .menu li{
            list-style: none;
            display: inline-block;
        }
        .menu li a{
            text-decoration: none;
            position: relative;
            color: #313131;
            font-size: 50px;
            font-weight: 700;
            font-family: sans-serif;
            display: block;
            overflow: hidden;
            transition: 0.7s all;
            padding: 14px 20px;
        }
        .menu li a:before{
            content: '';
            width: 60px;
            position: absolute;
            border-bottom: 8px solid #313131;
            bottom: 0;
            right: 350px;
            transition: 0.7s all;
        }
        .menu li a:hover:before{
            right: 0;
        }
    </style>
</head>
<body>
    <ul id="menu" class="menu">
        <ul>
            <center>
                <li><a href="">HOME</a></li>
                <li><a href="">WORKS</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">CONTACT</a></li>
                <li><a href="">BUY</a></li>
            </center>
        </ul>
    </ul>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>

</script>
</html>